@import '~@/theme/index.less';

.je-icon {
	fill: currentColor;
	background-size: cover;
	font-size: 28px;
	// width: @icon-size-md;
	// height: @icon-size-md;

	&-xxxs {
		width: @icon-size-xxxs;
		height: @icon-size-xxxs;
		font-size: @icon-size-xxxs;
	}
	&-xxs {
		width: @icon-size-xxs;
		height: @icon-size-xxs;
		font-size: @icon-size-xxs;
	}

	&-xs {
		width: @icon-size-xs;
		height: @icon-size-xs;
		line-height: @icon-size-xs;
	}

	&-sm {
		width: @icon-size-sm;
		height: @icon-size-sm;
		font-size: @icon-size-sm;
		line-height: @icon-size-sm;
	}

	&-md {
		width: @icon-size-md;
		height: @icon-size-md;
		font-size: @icon-size-md;
		line-height: @icon-size-md;
	}

	&-lg {
		width: @icon-size-lg;
		height: @icon-size-lg;
		font-size: @icon-size-lg;
		line-height: @icon-size-lg;
	}
	&-big {
		width: @icon-size-big;
		height: @icon-size-big;
		font-size: @icon-size-big;
		line-height: @icon-size-big;
	}

	&-loading {
		animation: cirle-anim 1s linear infinite;
	}

	@keyframes cirle-anim {
		100% {
			transform: rotate(360deg);
		}
	}
}
